<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr id="yourTableId"></tr>
        <tbody id="trRow"></tbody>
        <tr id="trMony"></tr>
    </table>
</body>
<script>
   

    const testArr = [
        {
            code: 1,
            name: '芜湖',
            consignee: '张三',
            address: '芜湖',
            createTime: '2023-11-8 17:13:32',
            count: 2,
            price: 20,
            discount: 5,
            pay: 15,
            remark: '盖亚'
        },
        {
            code: 2,
            name: '芜湖',
            consignee: '张三',
            address: '芜湖',
            createTime: '2023-11-8 17:13:32',
            count: 2,
            price: 20,
            discount: 5,
            pay: 15,
            remark: '盖亚'
        },
        {
            code: 3,
            name: '芜湖',
            consignee: '张三',
            address: '芜湖',
            createTime: '2023-11-8 17:13:32',
            count: 2,
            price: 20,
            discount: 5,
            pay: 15,
            remark: '盖亚'
        }
        
    ]
    const moneyObj ={
        amount:'壹佰元整',
        money:'100'
    }



    
    const trRow = document.querySelector('#trRow');
    // 第一行表头
    function print() {
        return `
            <th>订单编码</th>
            <th>商品名称</th>
            <th>收货人</th>
            <th>收货地址</th>
            <th>购买时间</th>
            <th>购买数量</th>
            <th>金额</th>
            <th>优惠价格</th>
            <th>实付金额</th>
            <th>备注</th>
        `
    }
    // 第二行表内容
    let htmlTr =''
    testArr.forEach(item => {
        htmlTr += `
        <tr>
            <td>${item.code}</td>
            <td>${item.name}</td>
            <td>${item.consignee}</td>
            <td>${item.address}</td>
            <td>${item.createTime}</td>
            <td>${item.count}</td>
            <td>${item.price}</td>
            <td>${item.discount}</td>
            <td>${item.pay}</td>
            <td>${item.remark}</td>
        <tr>    
        `;
    });
    trRow.innerHTML=htmlTr

        // 第三行表尾
    function name(params) {
        return`
        <td colspan="4">合计金额(大写)</td>
            <td colspan="3">${params.amount}</td>
            <td colspan="3">¥${params.money}</td>
        `
    }
    document.querySelector('#yourTableId').innerHTML = print()
    document.querySelector('#trMony').innerHTML = name(moneyObj)
</script>

</html>